<template>
  <div class="audit-view-container">
    <!-- tabs -->
    <div class="audit-tab">
      <a-menu
        :default-selected-keys="['用户列表']"
        :default-open-keys="['用户管理']"
        mode="inline"
        :inline-collapsed="collapsed"
        class="menu-list"
      >
        <template v-for="tab in AuditTabs">
          <a-menu-item
            v-if="!(tab.children && tab.children.length > 0)"
            :key="tab.name"
            class="menu-item"
            @click="clickMenu(tab.path)"
          >
            <span>{{ tab.name }}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="tab.name">
            <span slot="title">{{ tab.name }}</span>
            <a-menu-item
              v-for="subMenu in tab.children"
              :key="subMenu.name"
              @click="clickMenu(subMenu.path)"
            >
              <span>{{ subMenu.name }}</span>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </div>
    <!-- 内容 -->
    <div class="audit-detail">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * audit  view
 * @author Jinhui Hou
 */
import { Component, Vue } from 'vue-property-decorator'
import AuditData from '@/views/audit/AuditData.vue'

@Component({
  components: { AuditData },
})
export default class AuditView extends Vue {
  public collapsed: boolean = false
  public defaultTable: string[] = [
    this.$route.path.startsWith('/management/audit/record')
      ? '/management/audit/record'
      : '',
    this.$route.path.startsWith('/management/audit/operator')
      ? '/management/audit/operator'
      : '',
    this.$route.path.startsWith('/management/audit/user-info')
      ? '/management/audit/user-info'
      : '',
  ]

  public AuditTabs: any[] = [
    /*
    {
      name: '操作历史',
      path: '/management/audit/record',
    },
    */
    {
      name: '用户管理',
      children: [
        {
          name: '用户列表',
          path: '/management/audit/user-info',
        },
        {
          name: '用户数据',
          path: '/management/audit/user-dataset-info',
        },
        {
          name: '任务监测',
          path: '/management/audit/task-info',
        },
        {
          name: '访问历史',
          path: '/management/audit/visit-history',
        },
      ],
    },
    /*
    {
      name: '算子审核',
      path: '/management/audit/operator',
    },
    */
    {
      name: '客服服务',
      path: '/management/audit/service',
    },
  ]

  public clickMenu(path: string) {
    if (path !== this.$route.path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.audit-view-container {
  display: flex;
  height: calc(100vh - 108px);
  width: 100%;

  .audit-tab {
    background-color: #fff;
    height: 100%;
    width: 220px;
  }

  .audit-detail {
    background-color: #f0f2f5;
    height: 100%;
    width: calc(100% - 220px);
  }
}

/deep/ .ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right-color: transparent;
}

/deep/ .ant-menu-item-selected::after,
/deep/ .ant-menu-item::after {
  left: 0;
  right: auto;
}
</style>
